/*
 * @Author: 一路向阳 tt_sunzhenfeng@163.com
 * @Date: 2024-01-28 16:06:28
 * @LastEditors: 一路向阳 tt_sunzhenfeng@163.com
 * @LastEditTime: 2024-02-28 17:57:40
 * @FilePath: \utils_react_manager\app\src\App.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect } from 'react';
import { useRoutes, useLocation, useNavigate } from 'react-router-dom';
import routes from './router';
import { message } from 'antd';
/**
 *后台管理系统两种经典的跳转情况：
 *1，如果访问的是登录页面，并且有token，则跳转到首页；
 *2，如果访问的是首页，并且没有token，则跳转到登录页面；
 *3，其余情况，正常显示页面；
 */

const ToLogin = () => {
  const navigate = useNavigate();
  // 加载完组件后执行
  useEffect(
    () => {
      navigate('/login');
      message.warning('您还没有登录，请登录后再访问！');
    },
    []
  );

  return <div></div>;
};

const ToHome = () => {
  const navigate = useNavigate();
  // 加载完组件后执行
  useEffect(
    () => {
      navigate('/home');
      message.warning('您已经登录过了！')
    },
    []
  );

  return <div></div>;
}

const BeforeRouterEnter: React.FC = () => {
  const outlet = useRoutes(routes);
  const location = useLocation();
  
  const token = localStorage.getItem('utils-react-manager-token') || '';
  if (location.pathname === '/login' && token) {
    // 不可以直接使用navigate实现跳转
    return <ToHome />;
  }

  if (location.pathname !== '/login' && !token) {
    // 不可以直接使用navigate实现跳转
    return <ToLogin />;
  }
  
  return outlet;
};

const App: React.FC = () => {

  

  return (
    <div className="root-page-container">
      <BeforeRouterEnter />
    </div>
  )
}

export default App;
